<template>
	<view>
		<cu-custom bgColor="bg-gradual-blue" :isBack="false">
			<!-- <block slot="backText">返回</block> -->
			<block slot="content">通讯录</block>
		</cu-custom>
		<u-sticky>
			<view class="search">
				<u-search v-model="keyword" @custom="search" @search="search"></u-search>
			</view>
		</u-sticky>

		<u-index-list :indexList="indexList">
			<view slot="header" class="list">
				<!-- <view class="list__item">
					<u-avatar shape="square" size="35" icon="man-add-fill" fontSize="26" randomBgColor></u-avatar>
					<text class="list__item__user-name">新的朋友</text>
				</view>
				<u-line></u-line>
				<view class="list__item">
					<u-avatar shape="square" size="35" icon="tags-fill" fontSize="26" randomBgColor></u-avatar>
					<text class="list__item__user-name">标签</text>
				</view>
				<u-line></u-line>
				<view class="list__item">
					<u-avatar shape="square" size="35" icon="chrome-circle-fill" fontSize="26" randomBgColor></u-avatar>
					<text class="list__item__user-name">朋友圈</text>
				</view>
				<u-line></u-line>
				<view class="list__item">
					<u-avatar shape="square" size="35" icon="qq-fill" fontSize="26" randomBgColor></u-avatar>
					<text class="list__item__user-name">QQ</text>
				</view> -->
				<u-line></u-line>
			</view>
			<template v-for="(item, index) in itemArr">
				<template>
					<!-- #ifdef APP-NVUE -->
					<u-index-anchor :text="indexList[index]" :key="index"></u-index-anchor>
					<!-- #endif -->
					<u-index-item :key="index">
						<!-- #ifndef APP-NVUE -->
						<u-index-anchor :text="indexList[index]"></u-index-anchor>
						<!-- #endif -->
						<view class="list" v-for="(item1, index1) in item" :key="index1">
							<view class="list__item" @click="navTo(item1)">
								<image class="list__item__avatar" :src="item1.url"></image>
								<text class="list__item__user-name">{{item1.name}}</text>
							</view>
							<u-line></u-line>
						</view>
					</u-index-item>
				</template>

			</template>
			<!-- <view slot="footer" class="u-safe-area-inset--bottom">
				<text class="list__footer">共{{total}}位好友</text>
			</view> -->
			<u-divider class="u-safe-area-inset--bottom" :text="total"></u-divider>
		</u-index-list>
	</view>

</template>

<script>
	import {
		getAddressBook
	} from '../../network/service/addressBook.js'
	const indexList = () => {
		const indexList = []
		const charCodeOfA = 'A'.charCodeAt(0)
		//indexList.push("↑")
		//indexList.push("☆")
		for (let i = 0; i < 26; i++) {
			indexList.push(String.fromCharCode(charCodeOfA + i))
		}
		indexList.push('#')
		return indexList
	}
	export default {
		data() {
			return {
				indexList: indexList(),
				urls: [
					'https://cdn.uviewui.com/uview/album/1.jpg',
					'https://cdn.uviewui.com/uview/album/2.jpg',
					'https://cdn.uviewui.com/uview/album/3.jpg',
					'https://cdn.uviewui.com/uview/album/4.jpg',
					'https://cdn.uviewui.com/uview/album/5.jpg',
					'https://cdn.uviewui.com/uview/album/6.jpg',
					'https://cdn.uviewui.com/uview/album/7.jpg',
					'https://cdn.uviewui.com/uview/album/8.jpg',
					'https://cdn.uviewui.com/uview/album/9.jpg',
					'https://cdn.uviewui.com/uview/album/10.jpg',
				],
				txlArr: [],
				total: '',
				keyword: '',
			}
		},
		computed: {
			itemArr() {
				return this.indexList.map(item => {
					const arr = []
					for (let i = 0; i < this.txlArr.length; i++) {
						const a = this.txlArr[i]
						if (a.pinyin) {
							const zm = a.pinyin.substring(0, 1).toUpperCase()
							if (item === zm) {
								arr.push({
									name: a.name,
									url: this.goToUrlByUser(a.faceId, '') ?
										this.goToUrlByUser(a.faceId, '') : this.urls[uni.$u
											.random(0, this.urls.length -
												1)],
									faceId: a.faceId,
									// url: this.urls[uni.$u.random(0, this.urls.length - 1)],
									number: a.code,
									companyName: a.companyName,
									phone: a.userName,
									email: a.email,
									dpname: a.userDeptName,
									sex: a.sex,
									positionLevel: a.positionLevel
								})
							}
						}

					}
					return arr
				})
			}
		},
		created() {
			this.getBooksList();
		},
		mounted() {

		},
		methods: {
			navTo(item) {
				const a = {
					...item,
					url: ''
				}
				const url = '/pages/book/personal-details?info=' + JSON.stringify(a)
				uni.navigateTo({
					url: url
				});
			},
			search(value) {
				this.getBooksList(value)
			},
			goToUrlByUser(avatar, token) {
				const userInfo = uni.getStorageSync("userInfo")
				token = userInfo.token
				if (avatar && (avatar.startsWith('http') || avatar.startsWith('https'))) {
					return avatar;
				}
				if (avatar) {
					return `http://192.168.2.188:11042${avatar}?X-Access-Token=zCy_ BeArEr ${token}`
				}
				return "";
			},
			getBooksList(keyword) {
				const that = this
				that.txlArr = []
				const userInfo = uni.getStorageSync("userInfo")
				let params = {
					url: '/user/getBookList',
					method: 'POST',
					data: {
						uid: userInfo.uid,
						companyId: userInfo.companyId,
						pageSize: 999,
						keyWord: keyword,
					},
				}
				getAddressBook(params).then(res => {
					this.total = '共 ' + res.data.total + " 位同事"
					this.txlArr = res.data.list
				})

			}
		}
	}
</script>

<style lang="scss">
	.list {

		&__item {
			@include flex;
			padding: 6px 12px;
			align-items: center;

			&__avatar {
				height: 35px;
				width: 35px;
				border-radius: 3px;
			}

			&__user-name {
				font-size: 16px;
				margin-left: 10px;
				color: $u-main-color;
			}
		}

		&__footer {
			color: $u-tips-color;
			font-size: 14px;
			text-align: center;
			margin: 15px 0;
		}
	}

	.u-safe-area-inset--bottom {
		margin-bottom: 140rpx;
	}

	.search {
		position: sticky;
		top: 0;
		z-index: 10;
		background: #ffffff;
		padding: 14px 14px 0;
		height: 64px;
	}
</style>